<template>
	<view>
		<view class="top_line"></view>
		<view class="Content_part">
			 <view class="content_list">
			 	<view class="first_list">
			 		<view class="list_left">
			 			<p>原密码</p>
			 		</view>
					<view class="list_right">
						<u-input v-model.trim="oldPsw" type="password"  placeholder="请填写原密码"/>
					</view>
			 	</view>
				<view class="second_list">
					<view class="list_left">
						<p>新密码</p>
					</view>
					<view class="list_right">
						<u-input v-model.trim="newPsw" type="password" placeholder="请填写新密码"/>
					</view>
				</view>
				<view class="third_list">
					<view class="list_left">
						<p>确认新密码</p>
					</view>
					<view class="list_right">
						<u-input v-model.trim="reNewPsw" type="password" placeholder="请确认密码"/>
					</view>
				</view>
			 </view>
		</view>
		<view class="confirm" style="v-index: 88;">
			<u-button type="success" size="default" @click="resetPsw()"  class="custom-style">确认修改</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
	export default {
		data() {
			return {
				oldPsw: '',
				newPsw: '',
				reNewPsw: ''
			}
		},
		methods: {
			resetPsw(){
				if(!this.oldPsw){
					return this.showTips('请输入原密码')
				}
			    if(!this.newPsw){
					return this.showTips('请输入新密码')
				}
				if(this.newPsw != this.reNewPsw){
					return this.showTips('两次输入密码不一致')
				}
				var tonulength = this.newPsw.split(" ").join("").length
				var iplength=this.newPsw.length
				if(iplength!=tonulength){
					this.$refs.uToast.show({
						title: '请输入非空字符',
						type: 'error'
					})
					return
				}
				// let params = {
				// 		oldPassword: md5Libs.md5(this.oldPsw),
				// 		password: md5Libs.md5(this.newPsw),
				// 	}
				let params = {
						oldPassword: this.oldPsw,
						password: this.newPsw,
					}
				this.$u.api.modifyPassword(params).then(res => {
					if(res == 1){
						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success',
							url: '/pages/login/login'
						})
					}else if(res == -1){
						this.showTips('原密码不正确')
					}else{
						this.showTips('修改失败')
					}
				})
			},
			showTips(tips){
				this.$refs.uToast.show({
					title: tips,
					type: 'error'
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f2f2f2;
	}
	.top_line {
		width: 100%;
		height: 3px;
		background-color: #F4F2F2;
	}
	.Content_part{
		width:100%;
		height:auto;
		background-color: #FFFFFF;
		margin-top: 5px;
	}
	.content_list{
		width:100%;
		height:auto;
		padding:10px 20px;
	}
	.first_list{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding:5px 0;
		border-bottom: 1px dashed #F1F1F1;
	}
	.second_list{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding:10px 0;
		border-bottom: 1px dashed #F1F1F1;
	}
	.third_list{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-bottom: 120px;
	    padding-top: 10px;
		
	}
	.list_left{
		min-width: 160rpx;
	}
	.list_right{
		width: 100%;
	}
	.confirm {
		padding: 0 20px;
		position: fixed;
		bottom: 10px;
		width: 100%;
	}

	.custom-style {
		background-color: #8BD2CF;

	}
</style>
